{% extends 'base.html' %}
{% block title %}Join more constituencies{% endblock %}

{% block content %}
<h2>Progress on recruitment</h2>
<p>We're trying to get at least one volunteer in each constituency.  Ideally, we'd have at least three in each constituency, as this will really help collaboration.  You can see how we're doing in these visualisations.</p>
<div id="no-volunteers" class="span-4">
<h3>Constituencies with no volunteers</h3>
 <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=http:%2F%2Fwww.democracyclub.org.uk%2Fstatistics%2Ffewerthan%2F1%2Fgeo.rss&amp;sll=53.800651,-4.064941&amp;sspn=16.261859,33.618164&amp;ie=UTF8&amp;ll=54.521081,-3.120117&amp;spn=8.935775,18.676758&amp;z=5&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=http:%2F%2Fwww.democracyclub.org.uk%2Fstatistics%2Ffewerthan%2F1%2Fgeo.rss&amp;sll=53.800651,-4.064941&amp;sspn=16.261859,33.618164&amp;ie=UTF8&amp;ll=54.521081,-3.120117&amp;spn=8.935775,18.676758&amp;z=5" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>
<div id="many-volunteers" class="span-4 last">
<h3>Constituencies with more than 3 volunteers</h3>
 <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=http:%2F%2Fwww.democracyclub.org.uk%2Fstatistics%2Fmorethan%2F3%2Fgeo.rss&amp;sll=53.800651,-4.064941&amp;sspn=16.261859,33.618164&amp;ie=UTF8&amp;ll=54.521081,-3.120117&amp;spn=8.935775,18.676758&amp;z=5&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=http:%2F%2Fwww.democracyclub.org.uk%2Fstatistics%2Fmorethan%2F3%2Fgeo.rss&amp;sll=53.800651,-4.064941&amp;sspn=16.261859,33.618164&amp;ie=UTF8&amp;ll=54.521081,-3.120117&amp;spn=8.935775,18.676758&amp;z=5" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>
<hr />
<h3>Successful signups over time</h3>

<div id="signupchart" class="span-8">Chart goes here</div>

{% endblock %}

{% block js %}
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
 <script type='text/javascript'>
   google.load('visualization', '1', {packages:['imagelinechart']});
   google.setOnLoadCallback(drawChart);
   function drawChart() {
     var data = new google.visualization.DataTable();
     data.addColumn('string', 'Date');
     data.addColumn('number', 'Signups');
     data.addRows({{ histogram.rowcount }});
    {% for row in histogram.fetchall %}
     data.setValue({{ forloop.counter0 }}, 0, '{% if forloop.counter0|divisibleby:categorystep %}{{ row.0 }}{% endif %}');
     data.setValue({{ forloop.counter0 }}, 1, {{ row.1 }});
    {% endfor %}
     var chart = new google.visualization.ImageLineChart(document.getElementById('signupchart'));
     chart.draw(data, {width: 800, height: 240, min: 0});
   }
 </script>

{% endblock %}
